<template>
	<view class="step-item">
		<view class="form-container">
			<view class="activity-info">
				<view class="">
					<view class="activity-title">
						<text>活动名称：</text>
						<text>{{ formData.name }}</text>
					</view>
					
					<view class="time-estimate">
						<view class="top-container" style="display: flex; align-items: center;justify-content: space-between">
							<view style="display: flex; align-items: center">
								<u-icon name="clock" style="margin-left: -18rpx"></u-icon>
								<view style="margin-left: 15rpx">
									<text>预计完成时间：</text>
									<text>24小时内</text>
								</view>
							</view>
							<image src="/static/images/inreview.png" mode="" style="right: 0%; width: 220rpx; height: 220rpx"></image>
						</view>
					</view>
				</view>
				<view class="details">
					<view class="detail-item">
						<view style="display: flex; align-items: center">
							<image src="/static/images/play.png" mode="" style="width: 20.44rpx; height: 24rpx; margin-left: -23rpx"></image>
							<text style="margin-left: 7rpx">活动类型：</text>
						</view>
						<text>{{ formData.type_text }}（上架费{{ formData.publish_price }}元）</text>
					</view>

					<view class="detail-item">
						<text>活动开始时间：</text>
						<text>{{ formData.start_time_text }}</text>
					</view>

					<view class="detail-item">
						<text>活动截止时间：</text>
						<text>{{ formData.end_time_text }}</text>
					</view>

					<view class="detail-item">
						<text>活动时长：</text>
						<text>{{ formData.duration }}</text>
					</view>

					<view class="detail-item">
						<text>适用年龄：</text>
						<text>{{ formData.min_age }} ~ {{ formData.max_age }}</text>
					</view>

					<view class="detail-item">
						<text>报名人数：</text>
						<text>{{ formData.max_user }}</text>
					</view>

					<view class="detail-item">
						<text>活动地点：</text>
						<text>{{ formData.address }}</text>
					</view>
				</view>


				<view class="price-info">
					<view class="price-item">
						<image src="/static/images/thali.png" mode="" style="width: 20.44rpx; height: 24rpx; margin-left: -19rpx"></image>
						<text style="margin-left: 7rpx">单人套餐：原价 ¥{{ formData.originalPrice }}，优惠价 ¥{{ formData.price }} ({{ discount }}折)</text>
					</view>
					<view class="price-item">
						<text>一大一小套餐：原价 ¥{{ formData.originalPrice }}，优惠价 ¥{{ formData.price }} ({{ discount }}折)</text>
					</view>
				</view>

				<view class="share-info" style="height: 140rpx; background: #fbfbfb; border-radius: 10rpx">
					<view style="display: flex; align-items: center">
						<image src="/static/images/scale.png" mode="" style="width: 20.44rpx; height: 24rpx; margin-left: -19rpx"></image>
						<view class="share-item">
							<text>分享人比例：{{ formData.share_rate }}</text>
						</view>
					</view>
					<view class="share-item">
						<text>陪伴师固定金额：¥{{ formData.implement_money }}</text>
					</view>
				</view>

				<view class="coupon-info" style="height: 90rpx; background: #fbfbfb; border-radius: 10rpx;  display: flex;align-items: center;">
					<image src="/static/images/discount.png" mode="" style="width: 20.44rpx; height: 24rpx; margin-left: -19rpx"></image>
					<text style="margin-left: 7rpx">启用优惠券：¥{{ couponAmount }}</text>
				</view>
			</view>
		</view>

		<view class="bottom-buttons">
			<view class="prev-btn" @click="prev">
				<text>上一步</text>
			</view>
			<view class="edit-btn" @click="editActivity" v-if="showEditButton">
				<text>编辑活动</text>
			</view>
		</view>

		<!-- 添加审核状态加载 -->
		<!-- <view class="checking-status" v-if="loading">
			<u-loading mode="circle" size="40" color="#0DC160"></u-loading>
			<text class="loading-text">正在审核中，请稍候...</text>
			<text class="tip-text">预计需要1-3分钟完成审核</text>
		</view> -->
	</view>
</template>

<script>
import { activityDetail } from '@/api/launchevent'

export default {
	props: {
		activityState: Number,
		initData:{
			type: Object,
			default: {}
		}
	},
	computed: {
		showEditButton() {
			return this.activityState === -1; // 只有审核失败显示编辑按钮
		}
	},
	data() {
		return {
			formData:{},
			activityName: '公益跑步活动',
			startTime: '2025年5月1日 10:00:00',
			endTime: '2025年5月2日 10:00:00',
			duration: '1天',
			ageRange: '8 ~ 15/岁',
			participantRange: '10 ~ 25/人',
			location: '北京市朝阳区公园',
			originalPrice: 299,
			discountPrice: 199,
			discount: '6.7',
			shareRatio: '10%',
			companionFee: 50,
			couponAmount: 10,
			loading: true,
			checkCount: 0,
			maxCheckCount: 10, // 最多检查10次
			timer: null
		};
	},
	watch: {
		initData: {
			handler(newVal) {
				this.formData = {
					...this.formData,
					...newVal
				}
				this.activityState = newVal.state
			},
			deep: true,
			immediate: true
		},
	},
	mounted() {
	},
	methods: {
		prev() {
			this.$emit('jump', 0); // 跳转到StepOne
		},
		editActivity() {
			if (this.activityState === 1) return; // 待审核状态不能编辑
			this.$emit('jump', 0); // 跳转到StepOne
		}
	}
};
</script>

<style lang="scss" scoped>
.step-item {
	background-color: #ffffff;
	min-height: 100vh;
	padding: 20rpx;
}

.activity-info {
	padding: 30rpx;
	background: #fff;
	border-radius: 12rpx;
}

.activity-title {
	font-size: 32rpx;
	font-weight: bold;

}

.time-estimate {
	color: #ff9900;
	font-size: 28rpx;
	margin-top: -64rpx;
	margin-bottom: 30rpx;

	.icon {
		margin-right: 10rpx;
	}
}

.details {
	height: 386rpx;
	background: #fbfbfb;
	border-radius: 10rpx;
	.detail-item {
		font-size: 28rpx;
		margin-bottom: 16rpx;
		color: #333;
	}
}

.price-info {
	margin: 30rpx 0;
	height: 140rpx;
	background: #fbfbfb;
	border-radius: 10rpx;
	.price-item {
		font-size: 28rpx;
		margin-bottom: 16rpx;

		.check-icon {
			color: #00cc66;
			margin-right: 10rpx;
		}
	}
}

.share-info,
.coupon-info {
	font-size: 28rpx;
	margin-bottom: 16rpx;

	.share-icon,
	.coupon-icon {
		margin-right: 10rpx;
	}
}

.bottom-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 24rpx;
	padding: 40rpx 20rpx;
	background: #fff;

	.prev-btn,
	.edit-btn {
		flex: 1;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 44rpx;
		font-size: 32rpx;
	}

	.prev-btn {
		border: 2rpx solid #00cc66;
		color: #00cc66;
	}

	.edit-btn {
		background: #00cc66;
		color: #fff;
	}
}

.checking-status {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	
	.loading-text {
		display: block;
		margin-top: 20rpx;
		color: #666;
		font-size: 28rpx;
	}
	
	.tip-text {
		display: block;
		margin-top: 10rpx;
		color: #999;
		font-size: 24rpx;
	}
}
</style>
